<template>
    <!-- <div>创建订单</div> -->
        <div class="shopcart-container">
        <!-- 收货地址区域 -->
        <div class="address-container">
            <div class="mui-card">
                <router-link :to="{name: 'address_select'}" replace>
                <h3>{{ address.name }} {{ address.tel }}</h3>
                <p>{{ address.area }} {{ address.detail }}</p>
                </router-link>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods-list">
            <!-- 商品列表项区域 -->
            <div class="mui-card">
                <div class="mui-card-content" v-for="(item) in goodslist" :key="item.id">
                    <div class="mui-card-content-inner flex">
                        <img :src="item.image">
                        <div class="info">
                            <h1>{{ item.name }}</h1>
                            <p class="flex">
                                <span class="price">¥{{ item.price }}</span>
                                <span>x{{ item.count }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 配送信息 -->
                <div class="process-info">
                    <p>
                        <strong>配送服务</strong>
                        <strong>快递运输</strong>
                    </p>
                    <p>
                        <span>中小件送货时间</span>
                        <span>工作日、双休日与节假日均可送货</span>
                    </p>
                </div>
                <!-- 订单备注 -->
                <div class="store-info">
                    <strong>订单备注</strong>
                    <textarea v-model="note" type="text" placeholder="选填，给商家留言"></textarea>
                </div>
            </div>
        </div>
        <!-- 运费信息 -->
        <ul class="fare-info mui-card">
            <li class="fare-price flex">
                <span>商品金额</span>
                <span class="red">¥{{ amount.toFixed(2) }}</span>
            </li>
            <li class="fare-price flex">
                <span>运费</span>
                <span class="red">¥0.00</span>
            </li>
            <li class="fare-price flex">
                <span><strong>总价</strong></span>
                <span class="red">¥{{ amount.toFixed(2) }}</span>
            </li>
            <!-- 创建订单按钮 -->
            <div class="flex">
                <button class="mui-btn mui-btn-primary mui-btn-block" @click="order">创建订单</button>
            </div>
        </ul>
    </div>
</template>
<!-- <script>
import { mapState } from 'vuex';

export default {
    computed: {
       ...mapState('shopcart', ['buy'])
    },
    created() {
        this.getGoodsList();
    }
};
</script> -->
<script>
import { mapGetters,mapState } from 'vuex';

export default {
    data() {
        return {
            goodslist: [],
            amount: 0,
            note: '',
            address: {},
            addressId: 0
        };
    },
    computed: {
      ...mapState('shopcart', ['buy']),
      ...mapGetters('shopcart', ['getBuy'])
    },
    // created: () => {
    //     if (this.$route.params.id) {
    //         this.addressId = this.$route.params.id;
    //     }
    //     this.getAddress();
    //     this.getGoodsList();
    // },
    created() {
    if (this.$route.params.id) {
        this.addressId = this.$route.params.id;
    }
    this.getAddress();
    this.getGoodsList();
    },
    methods: {
        getGoodsList() {
            // window.console.log(this.buy);
            var idArr = [];
            this.buy.forEach(item => idArr.push(item.id));
            if (idArr.length <= 0) {
                return;
            }
            this.$indicator.open({
                text: '加载中'
            });
            var params = { ids: idArr };
            this.$http.get('shopcart', { params: params }).then(res => {
                this.$indicator.close();
                // window.console.log(res.data);
                if (res.data.code === 1) {
                    this.goodslist = res.data.data;
                    var amount = 0;
                    this.goodslist.forEach(item => {
                        item.count = this.getBuy[item.id].count;
                        amount += item.count * item.price;
                    });
                    this.amount = amount;
                }
            });
        },
        getAddress() {
            var params = { id: this.addressId }
            this.$http.get('address/def',{ params: params }).then(res => {
                // window.console.log(res.data);
                if (res.data.code === 0) {
                    this.$toast(res.data.msg);
                } else if (res.data.code === 1) {
                    if (res.data.data) {
                        this.address = res.data.data;
                        this.addressId = res.data.data.id
                    } else {
                        this.$toast('请先添加收货地址');
                        this.$router.replace({ name: 'address_select' })
                    }
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' });
                }
            });
        },
        select(id) {
            if (this.$route.name!== 'address_select') {
                return;
            }
            this.$router.replace({
                name: 'order_create',
                params: {
                    id: id
                }
            });
        },
        order() {
            const form = {
                address: this.addressId,
                goods: this.buy,
                note: this.note
            };

            this.$indicator.open({
                text: '创建订单中'
            });

            this.$http.post('order/create', form).then((res) => {
                this.$indicator.close();
                // console.log(res.data);
                if (res.data.code === 0) {
                    this.$toast(res.data.msg);
                } else if (res.data.code === 1) {
                    this.$toast(res.data.msg);
                    this.$router.replace({ name: 'order_list' });
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' });
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
}

.shopcart-container {
    background: #eee;
    overflow: hidden;

    // 商品列表
   .goods-list {
        margin-top: 10px;
       .mui-card {
            margin: 0;
           .mui-card-content {
                border-bottom: 1px solid #eee;
               .mui-card-content-inner {
                    align-items: center;
                    padding: 10px;
                    img {
                        width: 60px;
                    }
                   .info {
                        margin-left: 10px;
                        box-sizing: border-box;
                        width: 100%;
                        overflow: hidden;
                        h1 {
                            font-size: 13px;
                            font-weight: bold;
                            line-height: 20px;
                            padding-top: 22px;
                        }
                        p {
                            flex-direction: row;
                            align-items: center;
                            justify-content: space-between;
                           .price {
                                font-size: 16px;
                                font-weight: 700;
                                color: red;
                                flex: 1;
                            }
                        }
                    }
                }
            }
            // 配送信息
           .process-info {
                padding: 10px;
                border-bottom: 1px solid #eee;
                p {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    color: #333;
                    span {
                        color: #999;
                    }
                }
            }
            // 店铺备注
           .store-info {
                padding: 10px;
                textarea {
                    font-size: 13px;
                }
            }
        }
    }
    // 运费信息
   .fare-info {
        padding: 10px;
        margin: 10px 0 0 0;
       .fare-price {
            padding: 5px 0;
            display: flex;
            justify-content: space-between;
           .red {
                color: red;
                font-size: 16px;
            }
        }
    }
    // 收货地址
    .address-container {
    .mui-card {
        margin: 0;
        padding: 10px;
        h3 {
            color: #333;
            font-size: 16px;
            font-weight: bold;
        }
        }
    }
}
</style>